<template>
  <div class="use-coupon" v-if="config">
    <div class="use-coupon-inner">
      <div class="use-coupon-box">
        <div class="coupon-panel">
          <div class="top">
            <div class="title">
              <div class="left" style="white-space: nowrap">
                <i></i>
                <span>
                  {{ getShopName(this.$route.query.shop_id)}}
                  <b>|</b>
                  {{ decodeURIComponent(this.$route.query.brand_name ) }}
                </span>
              </div>
              <div
                class="right"
                @click="handleShareClick"
                v-if="userInfo && userInfo.identity_type"
              ></div>
            </div>
            <div class="middle-wrapper" @click="$router.back()">
              <div class="price">
                ¥
                <span>{{this.$route.query.discount_money}}</span>
              </div>
              <div
                class="desc"
              >使用条件：凭借此券，在{{ getShopName(this.$route.query.shop_id)}}，消费满{{$route.query.discount_limit}}元即可使用</div>
              <div class="time">
                <div class="left">
                  <i></i>
                  <span>{{$route.query.start_at ? $route.query.start_at.split(' ')[0] : ''}}～{{$route.query.start_at ? $route.query.end_at.split(' ')[0] : ''}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="qrcode">
          <div class="code" ref="QrCode"></div>
          <p>{{ $route.query.verify_code }}</p>
        </div>
      </div>
      <div class="btn" v-if="$route.query.type !== 1">
        <my-button name="口令核销" @btnClick="handleBtnClick" />
      </div>
    </div>
    <van-popup v-model="show" closeable position="bottom" class="popup-overlay">
      <div class="popup-inner">
        <div class="title">口令核销</div>
        <div class="input-box">
          <i></i>
          <input type="text" placeholder="请输入核销口令" v-model="verify_code" />
        </div>
        <my-button name="确定" @btnClick="submit" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import ConfigList from '@/views/my/mixins/config-list'
import { codeVerification, getQrCodetext } from '@/api/my'
import wx from 'weixin-js-sdk'
const ERR_OK = 200
export default {
  data () {
    return {
      show: false,
      qrcode: null,
      verify_code: ''
    }
  },
  mixins: [ConfigList],
  mounted () {},
  watch: {
    config () {
      this.$nextTick(() => {
        this._getQrCodetext(this.$route.query.user_coupon_id).then(res => {
          if (res.code === ERR_OK) {
            this.initQrcode()
          }
        })
      })
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  methods: {
    handleShareClick () {
      wx.miniProgram.getEnv(ress => {
        if (ress.miniprogram) {
          const designerId = JSON.parse(localStorage.getItem('USER'))
            .designer_id
          const couponId = JSON.parse(this.$route.query.couponId)
          wx.miniProgram.navigateTo({
            url: `/pages/share/share?couponId=${couponId}&designerId=${designerId}`
          })
        }
      })
    },
    submit () {
      const me = this
      this._codeVerification(
        this.$route.query.user_coupon_id,
        this.verify_code
      ).then(res => {
        if (res.code === ERR_OK) {
          this.show = false
          this.$toast({
            message: '核销成功~',
            duration: 2000,
            onClose: function () {
              me.$emit('success')
              me.$router.go(-1)
            }
          })
        }
      })
    },
    handleBtnClick () {
      this.show = true
    },
    initQrcode () {
      const me = this
      this.qrcode = new QRCode(this.$refs.QrCode, {
        text: me.QrCodeText,
        width: 80,
        height: 80,
        colorDark: '#333333',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    _codeVerification (id, verifyCode) {
      return codeVerification(id, verifyCode)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getQrCodetext (userCouponId) {
      return getQrCodetext(userCouponId).then(res => {
        if (res.code === ERR_OK) {
          this.QrCodeText = res.data.url
          return Promise.resolve(res)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/mixin.scss";
.use-coupon {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  background: #f7f7f7;
  touch-action: none;
  padding: 0.56rem 0.36rem;
  box-sizing: border-box;
  .use-coupon-inner {
    width: 100%;
    height: 100%;
    position: relative;
    .use-coupon-box {
      background: url("../../../assets/images/bg_q2.png") no-repeat;
      background-size: cover;
      .coupon-panel {
        width: 6.6rem;
        position: relative;

        .top {
          width: 100%;
          padding: 0.22rem 0.36rem;
          box-sizing: border-box;
          .title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0;
            .left {
              i {
                display: inline-block;
                width: 0.72rem;
                height: 0.23rem;
                background: url("../../../assets/images/icon_logo .png")
                  no-repeat;
                background-size: cover;
                margin-right: 0.26rem;
              }
              span {
                font-size: 0.26rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: rgba(4, 0, 0, 1);
                line-height: 0.26rem;
                b {
                  padding: 0 0.1rem;
                }
              }
            }
            .right {
              width: 0.29rem;
              height: 0.28rem;
              background: url("../../../assets/images/icon_fx .png") no-repeat;
              background-size: cover;
            }
          }
          .middle-wrapper {
            .price {
              font-size: 0.26rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(4, 0, 0, 1);
              margin-top: 0.3rem;
              span {
                font-size: 0.6rem;
                font-family: Abel;
                font-weight: bold;
                color: rgba(4, 0, 0, 1);
              }
            }
            .desc {
              font-size: 0.2rem;
              font-family: PingFang SC;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 0.32rem;
              // width: 5.08rem;
              margin-top: 0.26rem;
            }
            .time {
              display: flex;
              align-items: center;
              margin-top: 0.38rem;
              .left,
              .right {
                font-size: 0;
                display: flex;
                align-items: center;
                i {
                  display: inline-block;
                  width: 0.32rem;
                  height: 0.32rem;
                  background: url("../../../assets/images/icon_time.png")
                    no-repeat;
                  background-size: cover;
                  margin-right: 0.24rem;
                }
                span {
                  font-size: 0.2rem;
                  font-family: PingFang SC;
                  font-weight: 400;
                  color: rgba(4, 0, 0, 1);
                }
              }
              .right {
                margin-left: 0.83rem;
                i {
                  background: url("../../../assets/images/icon_yhq.png")
                    no-repeat;
                  background-size: cover;
                }
              }
            }
          }
        }
      }
      .qrcode {
        width: 100%;
        height: 4.28rem;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        .code {
          width: 1.6rem;
          height: 1.6rem;
        }
        p {
          margin-top: 0.41rem;
          font-size: 0.28rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(0, 4, 0, 1);
        }
      }
    }
    .btn {
      width: 5.26rem;
      font-size: 0;
      @include hCenter();
      bottom: 1rem;
    }
  }
  .popup-overlay {
    .popup-inner {
      width: 100%;
      padding: 0 1.12rem;
      padding-bottom: 0.92rem;
      box-sizing: border-box;
      .title {
        font-size: 0.36rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(0, 4, 0, 1);
        line-height: 1.2rem;
        text-align: center;
      }
      .input-box {
        width: 100%;
        padding: 0.38rem 0 0.38rem 1rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        i {
          display: inline-block;
          width: 0.28rem;
          height: 0.38rem;
          background: url("../../../assets/images/icon_yzm.png") no-repeat;
          background-size: cover;
          margin-right: 0.15rem;
        }
        input {
          flex: 1;
          border: none;
          outline: none;
          width: 2.5rem;
          font-size: 0.28rem;
          font-family: PingFang SC;
          font-weight: 400;
          &::placeholder {
            color: rgba(153, 153, 153, 1);
          }
        }
      }
    }
  }
}
</style>
